<template>
	<view class="box flex-no-horizontal">
		<input :type="ifShowPassword ? 'text' : type" class="input" placeholder-class="input-pla" :placeholder="placeholder" @input="change" :maxlength="type === 'password' ? 6 : 18 " />
		<u-icon :name="!ifShowPassword ? 'eye-off' : 'eye-fill'" @click="changeType" v-if="type === 'password'"></u-icon>
	</view>
</template>

<script>
	export default {
		props:{
			placeholder: {
				type: String,
				default() {
					return ''
				}
			},
			type: {
				type: String,
				default() {
					return 'password'
				}
			},
		},
		data() {
			return{
				ifShowPassword: false,
				value: ''
			}
		},
		methods: {
			changeType() {
				this.ifShowPassword = !this.ifShowPassword
			},
			change(val) {
				this.$emit('input', val.detail.value)
			}
		}
	}
</script>

<style lang="scss">
	
	.box{
		justify-content: space-between;
		height: 90rpx;
		border-radius: 45rpx;
		background-color: rgba(247, 247, 247, 1);
		padding: 0 50rpx;
		
		.input{
			height: 90rpx;
		}
		
		.input-pla{
			color: rgba(179, 180, 181, 1);
			font-size: 28rpx;
		}
		
	}
	
</style>
